<template>
	<view class="onboarding">
		<view class="progress-container">
			<text class="step-text">步骤 {{ currentStep }} / {{ totalSteps }}</text>
			<progress
				:percent="progressPercent"
				:stroke-width="4"
				:border-radius="2"
				activeColor="#6F42C1"
				backgroundColor="#F0EAF8"
				:active="true"
				active-mode="forwards"
				:duration="40"
				@activeend="onStepAnimationEnd"
			/>
		</view>

		<view class="content">
			<!-- 这里是每一步的具体内容，用 v-if 控制显示 -->
			<view v-if="currentStep === 1">内容一：请设置您的昵称...</view>
			<view v-if="currentStep === 2">内容二：请选择一个头像...</view>
			<view v-if="currentStep === 3">内容三：请选择兴趣标签...</view>
		</view>

		<button @click="nextStep" :disabled="isAnimating">
			{{ currentStep === totalSteps ? '完成' : '下一步' }}
		</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentStep: 1,
			totalSteps: 3,
			isAnimating: true
		};
	},
	computed: {
		progressPercent() {
			return (this.currentStep / this.totalSteps) * 100;
		}
	},
	methods: {
		nextStep() {
			if (this.currentStep < this.totalSteps) {
				this.currentStep++;
				this.isAnimating = true;
			} else {
				uni.showToast({ title: '欢迎加入！', icon: 'success' });
			}
		},
		onStepAnimationEnd() {
			console.log(`第 ${this.currentStep} 步的进度条动画播放完毕。`);
			this.isAnimating = false;
		}
	}
};
</script>

<style>
/* style 部分也无需任何修改 */
.onboarding {
	padding: 20px;
	text-align: center;
}
.progress-container {
	margin-bottom: 40px;
}
.step-text {
	font-size: 14px;
	color: #555;
	margin-bottom: 8px;
}
.content {
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f9f9f9;
	border-radius: 8px;
	margin-bottom: 40px;
}
button[disabled] {
	background-color: #c8c7cc !important;
}
</style>
